<template>
    <div class="person">
        <h2>动物{{ animal.name }}年纪{{ animal.age }}</h2>
        <h2>车{{ car.brand }}价值{{ car.price }}</h2>
        <h2>{{ name }}</h2>
        <h2>{{ age }}</h2>

        <button @click="addAge">修改年纪</button>
        <button @click="addPrice">修改价格</button>
        <button @click="addAnimalAge">修改动物年纪</button>
    </div>

    <div>
        <h2>{{ a }}</h2>
        <h2>{{ p }}</h2>
        <br>
        <!-- 不同的遍历方式,没有唯一值用index作为key -->
        <ul>
            <li v-for="(a,index) in personList1" :key="index">{{ a.name }}</li>
        </ul>
        <!-- 不同的遍历方式,有唯一值则用它作为key -->
        <ul>
            <li v-for="a in personList1" :key="a.id">{{ a.name }}</li>
        </ul>
        <br>
    </div>
</template>

<script lang="ts">
//这里可以变为class
    export default {
        name : "Person123"
    }
</script>

<script lang="ts" setup>
    import { ref,reactive,toRefs,toRef,defineExpose,defineProps } from 'vue';
    import { type Persons,type PersonInter } from '@/components/test/Person';
    //基本型数据使用ref，层级较深、表单数据使用reactive
    let name = "hello";
    let age = ref(23);//将基本型数据变成响应式
    let animal = ref({name:"狗", age:12});//将对象变成响应式
    let car = reactive({ brand : "byd", price:100})//将对象变成响应式
    let {brand,price} = toRefs(car);//将对象的属性全部取出赋给变量，并变成响应式
    let carBrand = toRef(car,"brand");//将对象的某个属性取出来赋给变量，并变成响应式

    let addAge = function() {
        age.value ++;
    }
    let addAnimalAge = function() {
        animal.value.age ++;
    }
    let addPrice = function() {
        // car.price ++;
        //整个对象改变需要使用该方法
        Object.assign(car,{brand:"奔驰",price:99});
    }
    //暴漏出组件中的属性，以便父亲组件调用
    defineExpose({name});
    //将父亲的属性获取，在当前组件使用，只读
    // defineProps(["a","p","personList1","personList2"])
    //限定类型,?加上即是代表有就显示，没有也不报错，没有？就是父亲必须传
    defineProps<{a?:String,p?:PersonInter,personList1?:Persons,personList2?:Persons}>();
</script>